import React, { FunctionComponent, FC, useRef } from 'react'
import { fetchLoginAsync, changeStatus } from './loginSlice'
import { useAppDispatch, useAppSelector } from 'store/hooks'

interface LoginProps {
  token?: ''
}

// 对函数组件注解
const Login: FC<LoginProps> = (props) => {
  const username = useRef<HTMLInputElement | null>(null)
  const password = useRef<HTMLInputElement | null>(null)

  const dispatch = useAppDispatch()
  const store = useAppSelector((s) => s.login)

  const handleSubmit = () => {
    if (username.current && password.current) {
      // console.log(username.current.value, password.current.value)
      dispatch(fetchLoginAsync({ username: username.current.value, password: password.current.value }))
    }
  }
  return (
    <div className="login">
      <h1>{store.token}</h1>
      <h1>loading:{store.loading}</h1>
      账号：
      <input ref={username} />
      密码：
      <input ref={password} />
      <button onClick={handleSubmit}>提交</button>
      <button
        onClick={() => {
          dispatch(changeStatus('111111'))
        }}
      ></button>
    </div>
  )
}

export default Login
